<script>
    export default {
        data() {
            return {
                course_list : [
                    {
                        value : '1',
                        label : 'PHP基础'
                    },
                    {
                        value : '2',
                        label : 'JAVA基础'
                    },
                    {
                        value : '3',
                        label : 'UI设计'
                    },
                    {
                        value : '4',
                        label : 'IOS开发'
                    },
                    {
                        value : '5',
                        label : 'JAVASCRIPT基础'
                    },
                    {
                        value : '6',
                        label : '嵌入式开发'
                    }
                ],
                myForm : {
                    course_id : '',
                    title : '',
                    introduction : ''
                },
                rules : {
                    title : [
                        {required: true, message: "请输入章节标题!", trigger: 'blur'},
                        {min: 3, max: 20, message: "长度在3到20个字符!", trigger: 'blur'}
                    ],
                    introduction : [
                        {required: true, message: "请输入章节简介!", trigger: 'blur'}
                    ]
                }
            };
        },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if(valid) {
                        alert("所属课程ID"+this.myForm.course_id+"章节标题"+this.myForm.title+"章节简介"+this.myForm.introduction);
                    } else {
                        alert("数据错误！");
                        return false;
                    }
                });
            },

            resetForm(formName){
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<template>
    <div id="content">
        <el-form  :model="myForm" :rules="rules" ref="myForm" label-width="120px">
            <el-form-item label="所属课程">
                <el-select v-model="myForm.course_id" placeholder="请选择">
                    <el-option
                            v-for="item in course_list"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="章节标题"  prop="title">
                <el-input class="chapter_title" v-model="myForm.title"></el-input>
            </el-form-item>
            <el-form-item label="章节简介" prop="introduction">
                <el-input type="textarea" class="chapter_introduction" v-model="myForm.introduction"></el-input>
            </el-form-item>
            <el-form-item label="章节PPT">
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('myForm')">创建章节</el-button>
                <el-button @click="resetForm('myForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style type="text/css">
    #content {
        margin-top:20px;
        margin-left:20px;
    }
    #content .chapter_title {
        width:300px;
    }
    #content .chapter_introduction {
        width:300px;
    }
</style>